<template>
  <view class="container">
    <view
      v-if="!vehicleData || Object.keys(vehicleData).length === 0"
      class="no-data"
    >
      暂无查到数据
    </view>
    <template v-else>
      <view class="vehicle-info-card">
        <!-- 顶部车辆基本信息 -->
        <view class="vehicle-details">
          <h2 class="vehicle-title">营运车辆详情</h2>
          <view class="gray-background">
            <view class="license-plate">
              <text class="plate-number">{{ vehicleData.vehicleNo }}</text>
            </view>
            <view class="details">
              <view class="detail-item"
                >车牌颜色: {{ vehicleData.plateColor }}</view
              >
              <view class="detail-item"
                >省级区域: {{ vehicleData.provinceCode }}</view
              >
              <view class="detail-item"
                >创建日期: {{ vehicleData.createDate }}</view
              >
              <view class="detail-item"
                >更新日期: {{ vehicleData.modifyDate }}</view
              >
            </view>
          </view>
        </view>
      </view>

      <up-tabs
        class="up-tabs-content"
        :list="tabsList"
        :lineWidth="lineWidth"
        @change="onTabChange"
        lineColor="#2877FF"
        :activeStyle="activeTabStyle"
        :inactiveStyle="inactiveTabStyle"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
      />

      <component
        :is="currentComponent"
        :vehicleData="vehicleData"
        :key="currentTab"
      ></component>
    </template>
  </view>
</template>

<script>
import VehicleInfo from "./components/VehicleInfo.vue";
import VehicleTransportCertificate from "./components/VehicleTransportCertificate.vue";
import OwnerInfo from "./components/OwnerInfo.vue";
import AnnualInspection from "./components/AnnualInspection.vue";
import TechnicalGrade from "./components/TechnicalGrade.vue";
import LiabilityInsurance from "./components/LiabilityInsurance.vue";
import RoutePlate from "./components/RoutePlate.vue";
import TaxiDriverRegistration from "./components/TaxiDriverRegistration.vue";

export default {
  components: {
    VehicleInfo,
    VehicleTransportCertificate,
    OwnerInfo,
    AnnualInspection,
    TechnicalGrade,
    LiabilityInsurance,
    RoutePlate,
    TaxiDriverRegistration,
  },
  data() {
    return {
      vehicleData: {},
      currentTab: 0,
      lineWidth: 60,
      tabsList: [
        { name: "车辆信息", component: "VehicleInfo" },
        { name: "车辆运输证信息", component: "VehicleTransportCertificate" },
        { name: "业户信息", component: "OwnerInfo" },
        { name: "年度审验", component: "AnnualInspection" },
        { name: "技术等级", component: "TechnicalGrade" },
        { name: "责任险信息", component: "LiabilityInsurance" },
        { name: "线路标志牌", component: "RoutePlate" },
        { name: "出租车驾驶员注册信息", component: "TaxiDriverRegistration" },
      ],
    };
  },
  computed: {
    currentComponent() {
      return this.tabsList[this.currentTab].component;
    },
    activeTabStyle() {
      return {
        color: "#2877FF",
        fontWeight: "bold",
        fontSize: "16px",
      };
    },
    inactiveTabStyle() {
      return {
        color: "#0D1444",
        fontWeight: "bold",
        fontSize: "16px",
      };
    },
  },
  onLoad(options) {
    const storedVehicleData = uni.getStorageSync("vehicleData");
    if (storedVehicleData) {
      this.vehicleData = storedVehicleData;
    } else {
      console.error("No vehicle data available");
    }
  },
  methods: {
    onTabChange(index) {
      this.currentTab = index.index;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 10px;
  background: #f3f6fa;
  min-height: 100vh;
  .vehicle-info-card {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}
.vehicle-details {
  border-radius: 8px;
  margin-bottom: 20px;
  .vehicle-title {
    font-size: 14px; /* Slightly decreased font size */
    margin-bottom: 10px;
    color: #333333;
    font-weight: 300;
  }
  .gray-background {
    background-color: #fafafb;
    padding: 10px;
    border-radius: 8px;
    .license-plate {
      background-color: #ffbd02;
      color: black;
      padding: 10px;
      border-radius: 4px;
      display: inline-block;
      font-weight: bold;
      margin-bottom: 10px;
      width: 74px;
      height: 19px;
      .plate-number {
        font-size: 14px;
        font-weight: 400;
        color: black;
      }
    }
    .details {
      display: flex;
      flex-wrap: wrap;
      color: #606266;
      font-size: 12px;
      color: #79829c;
      .detail-item {
        flex: 1 1 50%;
        margin-bottom: 10px;
      }
    }
  }
}

//tab切换栏样式
.up-tabs-content {
  margin-bottom: 20px;
}
.no-data {
  text-align: center;
  color: #79829c;
  padding: 20px;
  font-size: 16px;
}
</style>
